<template>
  <!--
    父传子
       <子组件标签 :属性名=父组件属性 />
       子组件
          props:{
            属性名:{
              type:类型
              required:是否必传
              default:
                  基本类型：直接写
                  复杂类型:()=>{return 复杂类型的值}
              validator:(value)=>{
                return boolean
                    true:通过
                    false:报错
              }
            }
          }

  可选频道
     1：定义所有频道api
     2:导入调用
     3：拿到所有频道-我的频道数据=可选频道
     4：渲染可选频道

  删除我的频道的选项
  1：定义一个变量表示 是否编辑中isEdit:false
  2:处理按钮状态与我的频道选项状态
  3：点击我的频道的x按钮，删除点击频道（子传父）
   -->
  <van-action-sheet v-model="show" title="频道管理">
    <div class="top">
      <div class="left">我的频道---{{ value }}</div>
      <van-button @click="isEdit = !isEdit" plain type="danger" size="small">{{
        isEdit === false ? '编辑' : '取消'
      }}</van-button>
    </div>
    <div class="info">
      <van-grid>
        <!--
            新旧虚拟dom对比
            旧            新
              张三 1             王五  3
              李四 2             张三  1
                                 李四  2
         -->
        <van-grid-item
          v-for="(item, index) in list"
          :key="item.id"
          @click="itemClick(index)"
        >
          <span class="txt" :class="{ active: value === index }">{{
            item.name
          }}</span>
          <van-icon
            @click="delItem(item, index)"
            v-if="isEdit && item.name !== '推荐'"
            class="icon"
            name="cross"
          />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="top">
      <div class="left">可选频道</div>
    </div>
    <div class="info">
      <van-grid>
        <van-grid-item
          :text="item.name"
          v-for="item in otherList"
          :key="item.id"
          @click="$emit('addEvent', item)"
        />
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
import { channels } from '@/api/home'
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    value: {
      type: Number
    }
  },
  data () {
    return {
      show: false,
      allList: [],
      isEdit: false
    }
  },
  computed: {
    // 使用场景：依赖一个或者多个值产生一个新的值
    // 特点：缓存，依赖的值变化 了，它产生的新值会实时变化
    otherList () {
      return this.allList.filter(item => {
        // item:{id,name}
        // list:[{id,name}]
        //  this.list中是否有一上item.id的值
        //  forEach,map,filter,reduce
        //  find:找到就是相应项，找不到就是undefined
        //  findIndex:找到就是相应下标，找不到是-1
        //  some:有一个项满足条件，它就是true
        //  every:所有项都满足条件才是true
        // const findItem = this.list.find(i => i.id === item.id)
        // return !findItem
        // const bol = this.list.every(i => i.id !== item.id)
        // return bol
        // const bol = this.list.some(i => i.id === item.id)
        // return !bol
        const index = this.list.findIndex(i => i.id === item.id)
        return index === -1
      })
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await channels()
      this.allList = res.data.channels
      console.log('所有频道', res)
    },
    // 删除事件
    delItem (item, index) {
      // 要使用子传父删除点击项
      this.$emit('delEvent', item.id)
      // 删除后选中项下标处理
      // 删除项的下标在当前选中项之后：不用理
      // 删除项的下标在当前选中项之前：当前选中项-1
      // 删除项的下标在就是当前选中项：当前选中项-1
      // value    当前选中项下标
      // index    删除项的下标
      if (index <= this.value) {
        this.$emit('input', this.value - 1)
      }
    },
    // 我的频道点击
    itemClick (index) {
      this.$emit('input', index)
      this.show = false
    }
  }
}
</script>
<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px;
  .txt {
    font-size: 16px;
  }
}
.icon {
  position: absolute;
  right: 5px;
  top: 5px;
}

.txt {
  font-size: 16px;
  &.active {
    color: red;
  }
}
</style>
